<template>
  <div class="tab_developer">
    <div class="tab_inner"
         v-if="localPlugins.length > 0">
      <PanelList :list="localPlugins"
                 :active-index="activeIndex"
                 @change="changeActiveIndex"></PanelList>
      <PanelMain :info="localPlugins[activeIndex]"
                 type="Developer"></PanelMain>
    </div>
    <transition name="fade">
      <div class="tab_empty"
           v-if="localPlugins.length == 0">
        <svg>
          <use xlink:href="#icon-empty"></use>
        </svg>
        <div class="empty_info">
          <div class="empty_info_text">还没安装插件？去<a href="javascript:void(0)"
               style="margin: 0 5px;"
               @click="gotoTabPlugins($event)">插件中心</a>逛逛吧</div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { createNamespacedHelpers, mapState } from 'vuex'
const { mapActions } = createNamespacedHelpers('./store/modules')
export default {
  name: 'Developer',
  components: {
    PanelList: () => import('./parts/PanelList'),
    PanelMain: () => import('./parts/PanelMain/index'),
  },
  props: {
    activeTab: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      list: [],
      activeIndex: 0,
    }
  },
  computed: {
    ...mapState(
      {
        localPlugins: (state) => state.modulePlugins.local,
      }
    ),
  },
  watch: {
    activeTab: {
      immediate: true,
      handler (val) {
        if (val == 'Developer') {
          // let localPlugins = bbtools.sendSync('local-plugin-list')
          // this.list = localPlugins || []
          // this.initActiveIndex()
        }
      }
    }
  },
  mounted () {
    // bbtools.removeListener('drop-file-bbc-response', this.dropFileBbcResponse)
    // bbtools.on('drop-file-bbc-response', this.dropFileBbcResponse)
    // this.$nextTick(() => {
    //   bbtools.removeListener('drop-file-bbc-response', this.dropFileBbcResponse)
    //   bbtools.on('drop-file-bbc-response', this.dropFileBbcResponse)
    //   eventBus.$on('plugin-remove-response', this.pluginRemoveResponse)
    //   eventBus.$on('local-plugin-reload', this.localPluginReloaded)
    // })
  },
  methods: {
    localPluginReloaded (data) {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].id == data.id) {
          this.list.splice(i, 1, data)
          i = this.list.length
        }
      }
    },
    initActiveIndex () {
      let query = this.$urlFormat()
      if (query.hasOwnProperty('activeId')) {
        for (let i = 0; i < this.localPlugins.length; i++) {
          if (this.localPlugins[i].id == query.activeId) {
            this.activeIndex = i
            i = this.localPlugins.length
          }
        }
      }
    },
    changeActiveIndex (index) {
      this.activeIndex = index
    },
    gotoTabPlugins (e) {
      e.preventDefault()
      this.$emit('tab-change', {
        name: 'Plugins'
      })
    },
    dropFileBbcResponse (event, response) {
      if (response.status != 200) {
        this.$Message.error({
          content: response.message,
          duration: 5
        })
      } else {
        let _index = -1
        for (let i = 0; i < this.localPlugins.length; i++) {
          if (this.localPlugins[i].pid == response.data.pid) {
            _index = i
            i = this.localPlugins.length
          }
        }
        if (_index == -1) {
          // this.$set(this.localPlugins, this.localPlugins.length, response.data)
          this.$store.dispatch('modulePlugins/add', {
            type: 'local',
            data: response.data
          })
          this.activeIndex = this.localPlugins.length - 1
        } else {
          this.activeIndex = _index
        }
      }
    },
    pluginRemoveResponse (response) {
      if (response._tab == 'Developer') {
        let pindex = -1
        for (let i = 0; i < this.list.length; i++) {
          if (this.list[i].id == response.data.id) {
            pindex = i
            i = this.list.length
          }
        }
        if (pindex > -1) {
          this.list.splice(pindex, 1)
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import url("../themes/index.less");
.tab_developer {
  position: relative;
  width: 100%;
  height: 100%;
  // display: flex;
  // flex-direction: row;
  // align-items: center;
  // justify-content: center;
  .tab_inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .tab_empty {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    svg {
      width: 56px;
      height: 56px;
      fill: @darkTextColor4;
    }
    .empty_info {
      width: 100%;
      height: 32px;
      margin-top: 8px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      .empty_info_text {
        color: @darkTextColor4;
      }
    }
  }
}
</style>